/* eslint-disable */
import { useCallback } from 'react';
import { Handle, Position } from '@xyflow/react';

const handleStyle = { left: 10, background: 'red' };

// https://reactflow.nodejs.cn/learn/customization/custom-edges
function TextUpdaterNode({ _, isConnectable }) {
  const onChange = useCallback((evt) => {
    console.log(evt.target.value);
  }, []);

  return (
    <>
      <Handle type="target" position={Position.Top} id="c" isConnectable={isConnectable} />
      <div>
        <label htmlFor="text">Text:</label>
        <input id="text" name="text" onChange={onChange} className="nodrag" />
      </div>
      <Handle type="source" position={Position.Bottom} id="a" isConnectable={isConnectable} />
      <Handle
        type="source"
        position={Position.Bottom}
        id="b"
        style={handleStyle}
        isConnectable={isConnectable}
      />
    </>
  );
}

export default TextUpdaterNode;
